<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[165]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select v-model="page.adminUserId" style="width: 100%">
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('银行名称')" prop="bankName">
          <el-input v-model="page.bankName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('银行别名')" prop="alias">
          <el-input v-model="page.alias"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('银行账号')" prop="bankAccount">
          <el-input v-model="page.bankAccount"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('状态')" prop="status">
          <el-select v-model="page.status" style="width: 100%" clearable>
            <el-option :label="$t('禁用')" :value="0"></el-option>
            <el-option :label="$t('启用')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <div style="text-align: right;margin-bottom: 10px">
        <el-link type="primary" style="margin-right: 10px;font-size: 13px;color:#c09813" :underline="false">
          下次轮换时间:{{ dateTime }}
        </el-link>
        <el-button type="primary" @click="visibleCreate = true" v-show="$permiss[1424]">{{
            $t('生成虚拟线下还款卡')
          }}
        </el-button>
        <el-button type="primary" @click="addPayChannel" v-show="$permiss[160]">{{ $t('新增') }}</el-button>
      </div>
      <Table :page="page" :table-data="tableData" :table-column="tableColumn" @handleCurrentChange="handleCurrentChange"
             @handleSizeChange="handleSizeChange">
        <template slot-scope="scope" slot="status">
          <el-switch @change="changeStatus(scope.row)"
                     :disabled="!$permiss[614]"
                     :value="scope.row.status"></el-switch>
        </template>
        <template slot-scope="scope" slot="handle">
          <el-button type="text" @click="editPayChannel(scope.row)" v-show="$permiss[161]">{{ $t('编辑') }}</el-button>
          <el-button type="text" @click="bindApp(scope.row)" v-show="$permiss[166]">{{ $t('绑定APP') }}</el-button>
        </template>
      </Table>
    </el-card>
    <Dialog @cancel="visiblePay.isShow = false" @confirm="visiblePayConfirm" :visible.sync="visiblePay.isShow"
            @close="clearForm" :title="visiblePay.title"
            width="40%">
      <el-form :model="form" label-width="80px" ref="form" :rules="rulesForm">
        <el-form-item :label="$t('银行名称')" prop="bankName">
          <el-input v-model="form.bankName" :disabled="form.vaType === 1"></el-input>
        </el-form-item>
        <el-form-item :label="$t('账户别名')" prop="alias">
          <el-input v-model="form.alias"></el-input>
        </el-form-item>
        <el-form-item :label="$t('银行账号')" prop="bankAccount">
          <el-input v-model="form.bankAccount" :disabled="form.vaType === 1"></el-input>
        </el-form-item>
        <el-form-item :label="$t('支行名称')" prop="branchName">
          <el-input v-model="form.branchName" :disabled="form.vaType === 1"></el-input>
        </el-form-item>
        <el-form-item :label="$t('银行户名')" prop="bankAccountName">
          <el-input v-model="form.bankAccountName" :disabled="form.vaType === 1"></el-input>
        </el-form-item>
        <el-form-item :label="$t('备注')" prop="remark">
          <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item :label="$t('状态')" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">{{ $t('启用') }}</el-radio>
            <el-radio :label="0">{{ $t('禁用') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>

    <Dialog @cancel="visibleCreate = false" @confirm="createConfirm" :visible.sync="visibleCreate"
            @close="createClearForm" title="生成虚拟线下还款卡"
            width="40%">
      <el-form :model="createForm" label-width="80px" ref="createForm">
        <el-form-item :label="$t('银行别名')" prop="alias" :rules="[
              {required: true, message: this.$t('不能为空')},
        ]">
          <el-input v-model="createForm.alias"></el-input>
        </el-form-item>
        <el-form-item :label="$t('银行账户名')" label-width="100px" prop="bankAccountName" :rules="[
              {required: true, message: this.$t('不能为空')},
        ]">
          <el-input v-model="createForm.bankAccountName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('备注')" prop="remark">
          <el-input type="textarea" :rows="3" v-model="createForm.remark"></el-input>
        </el-form-item>
        <el-form-item :label="$t('状态')" prop="status">
          <el-radio-group v-model="createForm.status">
            <el-radio :label="1">{{ $t('启用') }}</el-radio>
            <el-radio :label="0">{{ $t('禁用') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>
    <BingApp :visible.sync="bindAppVisible" :productQuery="productQuery"></BingApp>
  </div>
</template>

<script>
import BingApp from './compoents/bingApp'
import {deepClone} from "@/utils/tools";
import {selectTenant} from "@/api/system";
import {
  fetchList,
  bindingProductInsert,
  offlinePayUpdate,
  offlinePayUpdateStatus,
  createOfflineCard,
  fetchDateTime
} from '@/api/pay'

export default {
  name: 'offlinePay',
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableColumn: [
        {label: this.$t('银行名称'), prop: 'bankName', align: 'center'},
        {label: this.$t('银行账号'), prop: 'bankAccount', align: 'center', minWidth: 150,},
        {label: this.$t('银行别名'), prop: 'alias', align: 'center'},
        {label: this.$t('银行账户名'), prop: 'bankAccountName', align: 'center'},
        {label: this.$t('支行名称'), prop: 'branchName', align: 'center'},
        {label: this.$t('创建时间'), prop: 'creationTime', align: 'center', width: '150'},
        {label: this.$t('创建人'), prop: 'inputName', align: 'center'},
        {label: this.$t('备注'), prop: 'remark', align: 'center'},
        {label: this.$t('状态'), slot: 'status', align: 'center'},
        {
          label: this.$t('操作'),
          slot: 'handle',
          align: 'center',
          minWidth: 200,
          isHide: !this.$permiss[161] && !this.$permiss[166]
        },
      ],
      tableData: [],
      form: {
        status: 1
      },
      rulesForm: {
        bankName: [
          {required: true, message: this.$t('不能为空')},
        ],
        alias: [
          {required: true, message: this.$t('不能为空')},
        ],
        bankAccount: [
          {required: true, message: this.$t('不能为空')},
        ],
        branchName: [
          {required: true, message: this.$t('不能为空')},
        ],
        bankAccountName: [
          {required: true, message: this.$t('不能为空')},
        ],
      },
      visiblePay: {
        isShow: false,
        title: '',
        type: ''
      },
      createForm: {
        status: 1,
        alias: null,
        bankAccountName: null,
        remark: null
      },
      visibleCreate: false,
      tenantList: [],
      bindAppVisible: false,
      productQuery: {},
      dateTime: null
    }
  },
  async mounted() {
    this.tenantList = await selectTenant().then(res => res.data)
    this.tenantList.length > 0 ? this.page.adminUserId = this.tenantList[0].adminUserId : null
    this.getDateTime()
    this.getTableData()
  },
  components: {
    BingApp
  },
  methods: {
    async getTableData() {
      const res = await fetchList(this.page)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list.map(item => {
          item.status = item.status === 1
          return item
        })

        this.page = Object.assign({}, this.page, {
          total: total
        })
      }
    },
    addPayChannel() {
      this.visiblePay = {
        isShow: true,
        title: this.$t('新增'),
        type: 'add'
      }
    },
    resetSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        adminUserId: this.page.adminUserId
      }
      this.getTableData()
    },
    editPayChannel(row) {
      this.form = Object.assign({}, deepClone(row), {
        status: row.status ? 1 : 0
      })
      this.visiblePay = {
        isShow: true,
        title: this.$t('编辑'),
        type: 'edit'
      }
    },
    //  获取轮换时间
    async getDateTime() {
      const res = await fetchDateTime({cron: '0 0 0 1 1/3 ?'})
      if (res.code === 1) {
        this.dateTime = res.data
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    visiblePayConfirm() {
      this.$refs.form.validate(async v => {
        if (v) {
          let api
          let message = ''
          if (this.visiblePay.type === 'add') {
            api = bindingProductInsert(this.form)
            message = this.$t('新增成功')
          } else {
            api = offlinePayUpdate(this.form)
            message = this.$t('编辑成功')
          }
          const res = await api
          if (res.code === 1) {
            this.clearForm()
            this.$message.success(message)
            this.getTableData()
          }
        }
      })
    },
    createConfirm() {
      this.$refs.createForm.validate(async v => {
        if (v) {
          const res = await createOfflineCard(this.createForm)
          if (res.code === 1) {
            this.$message.success(this.$t('添加成功'))
            this.getTableData()
            this.visibleCreate = false
          }
        }
      })
    },
    createClearForm() {
      this.$refs.createForm.resetFields()
    },
    // 绑定产品
    async bindApp(row) {
      this.productQuery = deepClone(row)
      this.bindAppVisible = true
    },
    clearForm() {
      this.$refs.form.resetFields()
      this.visiblePay.isShow = false
    },
    async changeStatus(row) {
      const res = await offlinePayUpdateStatus({
        status: row.status ? 0 : 1,
        offlinePayId: row.offlinePayId
      })
      if (res.code === 1) {
        this.$message.success(this.$t('操作成功'))
        this.getTableData()
      }
    }
  }
}
</script>

<style scoped>

</style>
